<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>原价： {{price}} </h1>
        <h1>计算属性价格：{{computedPrice}} </h1>
        <h1>侦听器 VIPPrice： {{VIPPrice}} </h1>
        <h1>侦听器 SVIPPrice： {{SVIPPrice}} </h1>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                price: 100,
                VIPPrice: 0,
                SVIPPrice: 0
            }
        },
        methods: {},
        computed: {
            computedPrice() {
                // 计算属性不支持异步
                // setTimeout(() => {
                return this.price * 0.95
                // })
            }
        },
        // watch 是侦听器选项
        watch: {
            // 侦听器的名字，就是你要监听属性的名字
            // current 修改之后的值，price 修改前的值
            price(current, price) {
                // 侦听器在运行阶段不会立即执行一次，只有修改值后才会执行
                // console.log('-------', current, price);

                // 侦听器是由一个值影响多个值
                // 侦听器可以使用异步
                setTimeout(() => {
                    this.VIPPrice = current * 0.8
                    this.SVIPPrice = current * 0.2
                })

            }
        }

    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>